<!-- -->
<template>
  <div id="viewer">111</div>
</template>

<script>
import { Viewer } from "photo-sphere-viewer";
import MarkersPlugin from "photo-sphere-viewer/dist/plugins/markers";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import "photo-sphere-viewer/dist/plugins/markers.css";
import { getVr } from "@/api";

// export default {
//   // import引入到组件需要注入到对象中才能使用
//   components: {},
//   data() {
//     // 这里存放数据
//     return {
//       //点击切换标记要切换的图片2
//       arrImg: [],
//       viewer: "",
//       imgurl1: require("../assets/1.jpg"),
//       imgurl2: require("../assets/2.jpg"),
//       imgurl3: require("../assets/3.jpg"),
//       imgurl4: require("../assets/4.jpg"),
//       imgurl5: require("../assets/5.jpg"),
//       imgurl6:
//         "http://img.yunhuzx.com/files/uploads/2018/04-16/1523871116ca4119622405.jpg?x-oss-process=image/resize,w_1500",
//       imgurl7:
//         "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bd4657b02d180000018c1bcfc890.jpg%40900w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632463905&t=4a2eaf16cf24f52f57de58d6f04edda0",
//       img: ""
//     };
//   },
//   // 监听属性 类似于data概念
//   computed: {},
//   // 监听data中的数据变化
//   watch: {},
//   // 方法集合
//   methods: {},
//   //生命周期 - 创建完成 (可以访问当前this实例)
//   created() {
//     getVr().then(res => {
//       this.arrImg = res.data.map(item => item.imgs);

//       this.img = this.arrImg.map(item => item[0]);

//       console.log(this.img[0]);
//     });
//   },
//   //生命周期 - 挂载完成 (可以访问DOM元素)
//   mounted() {
//     this.viewer = new Viewer({
//       //获取盒子
//       container: document.querySelector("#viewer"),
//       panorama: this.img[0], // 全景图片
//       //图片的尺寸
//       size: {
//         width: "100vw",
//         height: "50vh"
//       },
//       plugins: [
//         [
//           //标记插件
//           MarkersPlugin,
//           {
//             //切换标记
//             markers: [
//               {
//                 id: "circle",
//                 tooltip: "A circle of radius 30",
//                 //圆圈大小
//                 circle: 30,
//                 svgStyle: {
//                   fill: "rgba(255,255,0,0.3)",
//                   stroke: "yellow",
//                   strokeWidth: "2px"
//                 },
//                 longitude: -1.5,
//                 latitude: -0.28,
//                 anchor: "center right"
//               }
//             ]
//           }
//         ]
//       ]
//     });

//     const markersPlugin = this.viewer.getPlugin(MarkersPlugin);
//     markersPlugin.on("select-marker", (e, marker) => {
//       console.log("继续操作");

//       this.viewer.animate({
//         //经度
//         longitude: marker.config.longitude,
//         //维度
//         latitude: marker.config.latitude,
//         //缩小
//         zoom: 100,
//         speed: "-2rpm"
//       });
//       // .then(() =>
//       //   //全景图
//       //   this.viewer.setPanorama(this.imgurl2).then(
//       //     () =>
//       //       //更新标记器
//       //       markersPlugin.updateMarker({
//       //         id: marker.id,
//       //         longitude: -1.8,
//       //         latitude: -0.28
//       //       }),
//       //     this.viewer
//       //       .animate({
//       //         zoom: 50,
//       //         speed: "2rpm"
//       //       })
//       //       .then(() => (this.imgurl2 = this.imgurl3))
//       //       .then(() => (this.imgurl3 = this.imgurl4))
//       //       .then(() => (this.imgurl4 = this.imgurl5))
//       //       .then(() => (this.imgurl5 = this.imgurl6))
//       //       .then(() => (this.imgurl6 = this.imgurl7))
//       //   )
//       // );
//     });
//   }
// };
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang='scss'  scoped>
</style>
